<template >
<div id="member_choose_bank">
	<c-title :hide="false" text='银行卡列表'></c-title>
  <div class="bank-main">
    <div class="bank-list">
      <block  v-for="(item,index) in bank" :key="index"   >
        <div class="bank-item flex" :class="getIconUrl(item)"  @click.stop="toPay(item)">
          <block v-for="(iconItem,iconIndex) in iconList" :key="iconIndex"  >
            <template v-if="item.bank_name== iconItem.bank_name">
              <img :src="`${imgPath}converge_pay/${iconItem.icon_cn_name_bg}`"  class="bank-bg" />
              <div class="bank-img" >
                <div class="bank-circle flex-a-c flex-j-c">
                  <img :src="`${imgPath}converge_pay/${iconItem.icon_cn_name}`"   />
                </div>
              </div>
            </template>
          </block>
          <div class="bank-wrap">
            <div class="bank-title flex-j-sb flex-a-c">
              <h3>{{item.bank_name}}</h3>
              <p @click.stop="tapUnbound(item)">解绑</p>
            </div>
            <div class="store-text">{{item.bank_type_name}}</div>
            <div class="bank-num">{{changeBank(item.card_no)}}</div>
          </div>
        </div>
      </block>
      <div class="bank-btn">
        <div class="add flex-a-c flex-j-c" @click="toAdd">
          <div class="add-icon"></div>
          <span>添加银行卡</span>
        </div>
      </div>
    </div>
  </div>
  <div class="mb-50"></div>
</div>
</template>
<script>
import member_choose_bank_controller from "./member_choose_bank_controller";
export default member_choose_bank_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.mb-50 {
  height: 50px;
  clear: both;
}
#member_choose_bank .bank-main .bank-list .bank-item  .bank-bg{
  width: 115px;
  // height: 115px;
  bottom: 0px;
}
#member_choose_bank {
  position: relative;
  height: 100vh;
  // background-color: #fff;
  .bank-main {
    .bank-list {
      margin:0.75rem 0.75rem 0 0.75rem;
      .bank-item {
        box-shadow: inset 0rem 0 0.3125rem 0.0625rem rgba(255,255,255,0.8);
        border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
        padding:0.875rem;
        margin:0 0 0.875rem 0;
        position: relative;
        .bank-bg {
          position: absolute;
          bottom:0;
          right:0.625rem;
          display: block;
        }
        .bank-img {
          padding:0 0.375rem 0 0;
          .bank-circle {
            width: 2.5rem;
            height: 2.5rem;
            background: #FFFFFF;
            border-radius: 50%;
            img {
              width:2.25rem;
              display: block;
              height: auto;
            }
          }
        }
        .bank-wrap {
          flex:1;
          .bank-title {
            color: #FFFFFF;
            h3 {
              font-size: 1rem;
              
            }
            p {
              font-size: 0.8125rem;
            }
          }
          .store-text {
            font-size: 0.8125rem;
            color: #FFFFFF;
            text-align: left;
            padding:0.1875rem 0 0 0;
          }
          .bank-num {
            font-weight: 500;
            font-size: 1.125rem;
            color: #FFFFFF;
            text-align: left;
            padding:1.625rem 0 0.625rem 0;
          }
        }
      }
      .bank-btn {
        background: #FFFFFF;
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        padding:1.125rem 0;
        .add {
          font-weight: 500;
          font-size: 0.875rem;
          color: #3B3B4A;
          .add-icon {
            width: 0.75rem;
            height: 0.75rem;
            position: relative;
            
            &::after {
              content:'';
              width: 0.75rem;
              height: 0.125rem;
              background: #AAAAB3;
              border-radius: 0.1875rem 0.1875rem 0.1875rem 0.1875rem;
              position: absolute;
              left:0;
              top:50%;
              transform: translate(0,-50%);
            }
            &::before {
              content:'';
              width: 0.125rem;
              height: 0.75rem;
              position: absolute;
              background: #AAAAB3;
              border-radius: 0.1875rem 0.1875rem 0.1875rem 0.1875rem;
              left:50%;
              top:50%;
              transform: translate(-50%,-50%);
            }
          }
          span {
            padding:0 0 0 0.3125rem;
          }
        }
      }
    }
  }

}

.zhongxin,.gongshang,.zhongguo,.beijing,.zhaoshang,.guangfa {
  background: linear-gradient(#F6454A  0%, #FB6F61 100%);
  box-shadow: inset 0rem 0 0.3125rem 0.0625rem rgba(255,255,255,0.8);
}
.shanghai,.jianshe,.jiaotong,.pufa {
  background: linear-gradient(#3567DC 0%, #5C8FE5 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.guangda {
  background: linear-gradient(#8147F9 0%, #977FF9 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.pingan {
  background: linear-gradient(#F97330 0%, #FF925A 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}
.youzheng,.mingsheng {
  background: linear-gradient(#06A484 0%, #45BEA3 100%);
  box-shadow: inset 0rem 0 0.3125rem 0rem rgba(255,255,255,0.8);
}

.default {
  background-color: #ccc;
}
</style>
